<template>
  <div>
    <!-- Logo+标题 -->
    <p>
      <el-row>
        <div class="logo_font">
          <!-- logo -->
          <el-col :span="17">
            <i class="el-icon-s-goods"></i>{{title}}<i class="el-icon-shopping-cart-full"></i>&nbsp;购物车
          </el-col>
          <!-- 返回主页 -->
          <el-col :span="3">
            <el-button type="success" plain @click="index()"><i class="el-icon-shopping-bag-1 buyer_info"></i>&nbsp;返回商城主页</el-button>
          </el-col>
        </div>
      </el-row>
    </p>
    <!-- 购物车 -->
    <div>
      <el-table :data="tableData" border show-summary style="width: 100%">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="amount1" label="数值 1">
        </el-table-column>
        <el-table-column prop="amount2" label="数值 2">
        </el-table-column>
        <el-table-column prop="amount3" label="数值 3">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CarInfo',
    data() {
      return {
        title: "“码”上商城 -- ",
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      }
    },
    methods: {
      index: function() {
        // 跳转商城主页
        this.$router.push("/index");
      }
    }
  }
</script>

<style>
  .logo_font {
    font-size: 30px;
    line-height: 1.7;
    font-family: "PingFang SC";
    text-align: left;
    margin-left: 100px;
  }

  .buyer_info {
    text-decoration: none;
    font-family: "PingFang SC";
    font-size: 20px;
    line-height: 10px;
  }
</style>
